<template>
  <layout
    class="layout"
    fixed-navbar>
    <search-navbar/>
    <segment>
      <title-line>热门搜索</title-line>
    </segment>
    <segment>
      <tag-list>
        <router-link
          v-for="(keyword, i) in list"
          :key="i"
          :to="'/exhibitions?search=' + keyword"><tag>{{ keyword }}</tag></router-link>
      </tag-list>
    </segment>
  </layout>
</template>

<style lang="scss" scoped>
  .layout {
    background-color: #fff;
  }
</style>

<script>
import Layout from '@/components/Layout'
import SearchNavbar from '@/components/SearchNavbar'
import TitleLine from '@/components/TitleLine'
import Segment from '@/components/Segment'
import Tag from '@/components/Tag'
import TagList from '@/components/TagList'
import { getHotSearchKeywords } from '@/api'

export default {
  components: {
    Layout,
    SearchNavbar,
    TitleLine,
    Segment,
    Tag,
    TagList
  },
  data () {
    return {
      list: []
    }
  },
  async created () {
    const { code, data } = await getHotSearchKeywords()
    if (code === 1) {
      this.list = data.list
    }
  }
}
</script>
